<template>
	<view class="relative" :style='{width:window.width+"px",height:window.height+"px"}'>
		<div @tap='operate' :ref="'container'+refId"
			:style='{width:window.width+"px",height:window.height+"px",background:background,backgroundRepeat:"no-repeat",backgroundSize:"cover",...mainStyle}'>
		</div>

		<view class="full">
			<view class="pad" style="flex: 1;">
				<view class="mint">
					<text class="iconfont icon-yinliangdi"></text>
					<view style="width:60%;">
						<slider @change="sliderChange" :value="setVolume" @changing="sliderChange" step="5"
							block-size='13' />

					</view>
					<text class="iconfont icon-yinlianggao"></text>
				</view>
			</view>
			<view class="pad">
				<span @tap='printscreen' class="iconfont icon-camera-full"></span>
				<!-- <span @tap='screenVideo' :class="isScreen ? 'iconfont icon-zanting-' : 'iconfont icon-shipin'"></span> -->
				<span @tap='isFullTap' :class="isFulls ? 'iconfont icon-suoxiao-' : 'iconfont icon-fangda-'"></span>
			</view>
		</view>

		<view class="kBps"
			v-if="statisticsAll && (screensStats.abps || screensStats.buf || screensStats.fps || screensStats.ts || screensStats.vbps)">
			<text class="iconfont icon-dian"></text>
			<text class="li" v-if="screensStats.abps">{{statisticsAll.abps}}abps</text>
			<text class="li" v-if="screensStats.buf">{{statisticsAll.buf}}buf</text>
			<text class="li" v-if="screensStats.fps">{{statisticsAll.fps}}fps</text>
			<text class="li" v-if="screensStats.ts">{{statisticsAll.ts}}ts</text>
			<text class="li" v-if="screensStats.vbps">{{statisticsAll.vbps}}vbps</text>
		</view>

		<view class="tabbar" v-if="isTabbar" @tap="tapTbabar">
			<view class="title">
				<text class="iconfont icon-fanhui"></text>
				<view class="texts">{{title}}</view>
			</view>
		</view>

		<view class="suspend" v-if="!isPaly" @tap='operate'>
			<text :class="!isPaly ? 'iconfont icon-bofang-':'iconfont icon-zanting-'"></text>
		</view>

		<slot></slot>
	</view>
</template>
<script>
	
	import props from './props.js';
	export default {
		name: 'sy-new-jessibuca',
		mixins: [props],

		data() {
			return {
				vertical: false,

				isScreen: false,

				jessibuca: null,

				isFulls: false,

				statisticsAll: null,

				isPaly: true,

				setVolume: 0,

				window: {
					width: this.width,
					height: this.height
				},

				videoStart: false,
				recorder: null
			}
		},
		mounted() {
			//console.log(RecordRTC)
			this.create();
			window.onerror = (msg) => (this.err = msg);
		},
		methods: {
			create() {
				this.jessibuca = new window.Jessibuca(
					Object.assign({
							container: this.$refs['container' + this.refId],
							isNotMute: this.isNotMute,
							isResize: this.isResize,
							decoder: this.decoder + 'uni_modules/sy-new-jessibuca/static/js/jessibuca.js',
							loadingText: this.loadingText,
							background: this.poster,
							operateBtns: {}
						},
						this.options
					)
				);

				this.jessibuca.on("load", () => {
					this.$emit('load');

					if (this.isAuto) {
						this.jessibuca.play(this.url);
						this.isPaly = true;
					};

					this.jessibuca.on("stats", (s) => {
						this.statisticsAll = s;
					});

					this.jessibuca.on("log", (data) => { //日志信息
						this.$emit('log', data);
					});

					this.jessibuca.on("error", (error) => { //报错信息
						this.$emit('error', error);
					});

					this.jessibuca.on("timeout", (timeout) => { //超时信息
						this.$emit('timeout', timeout);
					});
				});
			},

			/*播放/暂停视频*/
			play() {
				if (this.jessibuca && this.jessibuca.isPlaying()) {
					this.jessibuca.pause();
					this.isPaly = false;
					this.$emit('playing', false);
				} else {
					this.jessibuca.play(this.url);
					this.isPaly = true;
					this.$emit('playing', true)
				}
			},

			playing() {
				return this.isPaly;
			},

			fullsing() {
				return this.isFulls;
			},

			volumeing() {
				return this.setVolume;
			},

			maining() {
				return this.jessibuca
			},

			formFulls(data) {
				if (this.isFulls) {
					this.isFulls = false;
					document.getElementsByTagName('body')[0].style = 'transform:inherit;transform-origin:inherit';
					this.window.width = this.width;
					this.window.height = this.height;
					this.vertical = false;
					setTimeout(() => {
						this.jessibuca.resize();
					}, 50);

					this.$emit('colseFulls') //取消全屏事件
				} else {
					this.isFulls = true;
					document.getElementsByTagName('body')[0].style = 'transform:rotate(90deg);transform-origin:' + data
						.windowWidth / 2 + 'px ' + data.windowWidth / 2 + 'px';
					this.window.width = data.windowHeight + data.windowTop;
					this.window.height = data.windowWidth - data.windowTop;
					this.vertical = true;

					setTimeout(() => {
						this.jessibuca.resize();
					}, 50);
					this.$emit('openFulls') //打开全屏事件
				};
			},

			/*全屏事件*/
			isFullTap() {
				if (this.isPaly) {
					uni.getSystemInfo({
						success: (res) => {
							if (this.window.width < res.windowWidth && this.window.height < res.windowHeight) {
								this.formFulls(res);
							} else {
								this.formFulls(res);
							};
						}
					});
				}
			},

			/*截图事件*/
			printscreen() {
				if (this.isPaly) {
					this.jessibuca.screenshot(this.screensJosn.name, this.screensJosn.format, this.screensJosn.quality,
						this.screensJosn.type);
					this.$emit('printscreen', true)
				}
			},

			/*点击标题栏事件*/
			tapTbabar() {
				if (this.isPaly) {
					this.$emit('tapTbar')
				}
			},

			/*整体区域点击事件*/
			operate() {
				this.play()
			},

			/*滑块拖动事件*/
			sliderChange(e) {
				const mitu = parseFloat(Number(e.detail.value) / 100).toFixed(1);
				if (Number(mitu) < 0.1) {
					this.jessibuca.mute();
				} else {
					this.jessibuca.cancelMute();
				}
				this.jessibuca.setVolume(Number(mitu));
				this.$emit('volume', Number(mitu))
			},

			/*录屏事件*/
			screenVideo() {
				
				// if (this.isScreen) {
				// 	this.isScreen = false;
				// 	this.jessibuca.stopRecordAndSave();
				// } else {
				// 	this.isScreen = true;
				// 	this.jessibuca.startRecord(this.screenJosn.fileName, this.screenJosn.fileType);
				// }
			},

			/*关闭视频,不释放底层资源*/
			close() {
				if (this.jessibuca) {
					this.jessibuca.close();
				}
			},

			/*关闭视频，释放底层资源*/
			destroy() {
				if (this.jessibuca) {
					this.jessibuca.destroy();
				}
			},

			/*静音*/
			mute() {
				if (this.jessibuca) {
					this.jessibuca.mute();
				}
			},

			/*取消静音*/
			cancelMute() {
				if (this.jessibuca) {
					this.jessibuca.cancelMute();
				}
			}
		},
		onUnload() {
			this.destroy();
		}
	}
</script>
<style lang="scss">
	@import '@/uni_modules/sy-new-jessibuca/static/icon/iconfont.css';

	.suspend {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 9;

		text {
			font-size: 100rpx;
			color: rgba(0, 0, 0, .9);
		}
	}

	.mint {
		display: flex;
		align-items: center;

		&>.iconfont {
			font-size: 48rpx;
		}

		uni-slider {
			padding: 0 20rpx;
			margin: 0;
		}
	}


	.title {
		.icon-fanhui {
			margin-right: 12rpx;
		}

		display: flex;
		align-items: center;
		font-size: 28rpx;
		padding:20rpx;

		.texts {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			-o-text-overflow: ellipsis;
		}
	}

	.tabbar {
		position: absolute;
		z-index: 9;
		left: 0;
		top: 0;
		background: rgba(0, 0, 0, .5);
		font-size: 28rpx;
		color: #fff;
		width: 100%;
	}

	.relative {
		position: relative;
	}

	.full {
		position: absolute;
		z-index: 99;
		right: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		bottom: 0;
		width: 100%;

		.icon-fangda-,
		.icon-suoxiao-,
		.icon-camera-full,
		.icon-shipin,
		.icon-zanting- {
			font-size: 46rpx;
			color: rgba(0, 0, 0, .7);
			margin-left: 24rpx;

			&:nth-child(1) {
				margin-left: 0;
			}
		}

		;

		.icon-shipin {
			font-size: 48rpx;
		}

		.pad {
			padding: 20rpx;
		}
	}

	;

	.kBps {
		position: absolute;
		top: 14rpx;
		right: 20rpx;
		display: flex;
		align-items: center;
		color: #fff;
		background: rgba(0, 0, 0, .8);
		padding: 4rpx 12rpx;
		border-radius: 30rpx;
		font-size: 10px;
		z-index: 99;

		&>.icon-dian {
			color: #00aa00;
			font-size: 40rpx;
		}

		;

		.li {
			padding: 0 10rpx;
		}
	}
</style>
